import React, { Component } from 'react';
import { getUrlParams } from 'yl-util';
import { Input, Avatar, Button } from 'antd';

let openid = '';
const urlParams = getUrlParams(window.location.href.split('?')[1]);
if (urlParams && urlParams.id) {
  openid = window.btoa(window.btoa(`${urlParams.id}yqcmxssLcJL1l8jnlC`));
}

export default class extends Component {
  state = {
    dataList: [],
  }

  ws = new WebSocket('wss://ws.dundashi.com.cn/wss');
  interval = null;
  intervalSay = null;
  componentDidMount() {
    this.ws.onopen = this.handleOpen;
    this.ws.onmessage = this.handleMessage;
    this.ws.onclose = this.handleClose;
  }

  handleClose = () => {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }

  handleOpen = () => {
    this.bindId();
    this.login();
    const that = this;
    this.interval = setInterval(() => {
      that.ping();
    }, 8000);
  }

  bindId = () => {
    const params1 = {
      type: 'bind',
      data: {
        openid,
      },
    };
    this.ws.send(JSON.stringify(params1));
  }

  login = () => {
    const params2 = {
      type: 'login',
      data: {
        room_id: 78,
      },
    };
    this.ws.send(JSON.stringify(params2));
  }

  ping = () => {
    const params3 = {
      type: 'ping',
    };
    // console.log('在ping中');
    this.ws.send(JSON.stringify(params3));
  }

  say = (word) => {
    const params = {
      type: 'say',
      data: {
        content: word,
        type: 1, // 1 发言，2 全服喊话
      },
    };
    this.ws.send(JSON.stringify(params));
  }

  handleMessage = (response) => {
    const data = JSON.parse(response.data);
    if (data.type === 'news') {
      console.log('aaa');
      this.setState({ dataList: data.data.reverse() });
    }
    if (data.type === 'msg') {
      this.setState((state) => ({
        dataList: [...data.data.reverse(), ...state.dataList.splice(0, 50)],
      }));
    }
    console.log('message data: ', data);
  }

  handleSearch = (word) => {
    this.say(word);
  }

  handleSearchInterval = (word) => {
    if (this.intervalSay) {
      clearInterval(this.intervalSay);
    }
    this.say(word);
    this.intervalSay = setInterval(() => {
      this.say(word);
    }, 120000);
  }

  closeIntervalSay = () => {
    if (this.intervalSay) {
      clearInterval(this.intervalSay);
    }
  }

  render() {
    const { dataList } = this.state;
    console.log();
    return (
      <div className="index">
        <Input.Search
          placeholder="请输入发言内容"
          enterButton="发言"
          onSearch={this.handleSearch}
        />
        <Input.Search
          placeholder="请输入发言内容"
          enterButton="定时发言"
          onSearch={this.handleSearchInterval}
        />
        <Button type="primary" onClick={this.closeIntervalSay}>关闭定时发言</Button>
        {
          dataList.map(({ nickname, img, content, create_time }) => (
            <p>
              {nickname}&nbsp;&nbsp;{create_time}&nbsp;
              <Avatar src={img} alt="" /> ：
              {content}
            </p>
          ))
        }
      </div>
    );
  }
}
